import React, { useEffect, useState } from 'react'
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import { Avatar, Card, Drawer } from 'antd';
import axios from 'axios'
import ReactEcharts from 'echarts-for-react';
const { Meta } = Card;

export default function Home() {
  const [cardata, setCardata] = useState([])
  const [star, setStar] = useState([])
  const [close, setClose] = useState(false)
  useEffect(() => {
    axios.get('http://localhost:8000/news?publishState=2&_expand=category&_sort=view&_order=desc&_limit=6').then(res => {
      // console.log(res.data);
      setCardata(res.data)
    })
  }, [])
  useEffect(() => {
    axios.get('http://localhost:8000/news?publishState=2&_expand=category&_sort=star&_order=desc&_limit=6').then(res => {
      // console.log(res.data);
      setStar(res.data)
    })
  }, [])


  // const a=JSON.parse(localStorage.getItem("token"))
  // console.log(a);
  // const{}=JSON.parse(localStorage.getItem('token'))
  return (
    <>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Card size="small" title="用户最常浏览" bordered style={{ width: '450px', marginRight: '20px', fontSize: '25px' }} >
          {cardata.map(item => {
            return (
              // <a href={`#/news-manage/previews/${item.id}`}>{item.title}</a>
              <p>{item.title}</p>
            )
          })}
        </Card>
        <Card size="small" title="用户点赞最多" style={{ width: '450px', marginRight: '20px', fontSize: '25px' }}>
          {star.map(item => {
            return (
              // <a href={`#/news-manage/previews/${item.id}`}>{item.title}</a>
              <p>{item.title}</p>
            )
          })}
        </Card>
        <Card
          style={{
            width: '450px',
            fontSize: '25px'
          }}
          cover={
            <img
              alt="example"
              src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
            />
          }
          actions={[
            <SettingOutlined key="setting" onClick={() => {
              setClose(true)
            }} />,
            <EditOutlined key="edit" />,
            <EllipsisOutlined key="ellipsis" />,
          ]}
        >
          <Meta
            avatar={<Avatar src="https://joesch.moe/api/v1/random" />}
            title="Card title"
            description="This is the description"
          />
        </Card>
      </div>
      <div id='main' style={{ height: "400px", marginTop: '20px', marginLeft: '-40px' }}>
        <ReactEcharts
          option={option || {}}
          notMerge
          lazyUpdate />
      </div>
      <Drawer width='500px' title="个人新闻分类" placement="right" onClose={() => { setClose(false) }} open={close}>
        <div>
          <ReactEcharts
            option={option1 || {}}
            notMerge
            lazyUpdate />
        </div>
      </Drawer>
    </>
  )
}
const option = {
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
};
const option1 = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};